<template>
  <div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">项目名称</label></div>
      <div class="weui-cell__bd ">
        <input class="weui-input" placeholder="请输入项目名称" type="name" v-model="item.name">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开始时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" value="" v-model="item.startTime">
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">结束时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" type="date" value="" v-model="item.endTime">
        </div>
      </div>
    </div>
    <div class="weui_cell weui_cell_select">
      <div class="weui_cell_bd weui_cell_primary">
        <select class="weui_select" v-model="item.managerID">
          <option value=-1>请选择项目负责人</option>
          <option v-for="data in list"
                  :key="data.id"
                  :value="data.id"
                  :label="data.name"></option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">项目主要内容</label>
      </div>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入项目主要内容"
        v-model="item.content"
        clearable>
      </el-input>
    </div>
    <div class="weui-cell weui-cells_form">
      <div class="weui-cell__hd">
        <label class="weui-label">项目考核指标</label>
      </div>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入项目考核指标"
        v-model="item.target"
        clearable>
      </el-input>
    </div>
    <div class="weui-cell">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>项目课题安排</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleAddTask">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconicon_add"></use>
              </svg>
          </el-button>
        </div>
        <div v-for="data of taskAll" :key="data.name" class="text item">
          {{data.name}}
        </div>
      </el-card>
    </div>
    <div class="weui-btn-area">
      <a href="javascript:;" class="weui-btn weui-btn_primary" @click="submit()">提交</a>
    </div>

    <el-dialog title="新建课题" :visible.sync="addTask" width="90%">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">课题名称</label></div>
          <div class="weui-cell__bd ">
            <input class="weui-input" placeholder="请输入课题名称" type="name" v-model="task.name">
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">开始时间</label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" type="date" value="" v-model="task.startTime">
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">结束时间</label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" type="date" value="" v-model="task.endTime">
            </div>
          </div>
        </div>
        <div class="weui_cell weui_cell_select">
          <div class="weui_cell_bd weui_cell_primary">
            <select class="weui_select" v-model="task.leaderID">
              <option value=-1>请选择课题负责人</option>
              <option v-for="data in list"
                      :key="data.id"
                      :value="data.id"
                      :label="data.name"></option>
            </select>
          </div>
        </div>
        <div class="weui-cell weui-cells_form">
          <div class="weui-cell__hd">
            <label class="weui-label">课题主要内容</label>
          </div>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入课题主要内容"
            v-model="task.content"
            clearable>
          </el-input>
        </div>
        <div class="weui-cell weui-cells_form">
          <div class="weui-cell__hd">
            <label class="weui-label">课题考核指标</label>
          </div>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入课题考核指标"
            v-model="task.target"
            clearable>
          </el-input>
        </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTask = false">取 消</el-button>
        <el-button type="primary" @click="saveTask()">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'assistantForm',
  data () {
    return {
      addTask: false,
      task: {
        name: '',
        startTime: '',
        endTime: '',
        leaderID: '',
        content: '',
        target: ''
      },
      taskAll: [{
        name: '',
        startTime: '',
        endTime: '',
        leaderID: '',
        content: '',
        target: ''
      }],
      item: {
        name: '',
        startTime: '',
        endTime: '',
        content: '',
        managerID: '',
        target: ''
      },
      list: []
    }
  },
  methods: {
    handleAddTask () {
      // this.taskAll.forEach(function (item) {
      //   console.log(item.name)
      //   console.log(item.leaderID)
      // })
      this.task.name = ''
      this.task.leaderID = -1
      this.task.content = ''
      this.task.target = ''
      this.task.startTime = ''
      this.task.endTime = ''
      this.addTask = true
    },
    saveTask () {
      if (this.task.name === '') {
        this.$notify.warning({
          title: '请输入课题名称！'
        })
        return
      }
      if (parseInt(this.task.leaderID) === -1) {
        this.$notify.warning({
          title: '请选择课题负责人！'
        })
        return
      }
      this.taskAll.push({
        name: this.task.name,
        startTime: this.task.startTime,
        endTime: this.task.endTime,
        leaderID: parseInt(this.task.leaderID),
        content: this.task.content,
        target: this.task.target
      })
      this.addTask = false
    },
    getPIList () {
      axios.get(this.url + '/user/level/' + this.PI)
        .then(this.getPIListSucc)
    },
    getPIListSucc (res) {
      res = res.data
      if (res) {
        this.LeaderList = res
        this.list = this.list.concat(this.LeaderList)
      }
    },
    getPRList () {
      axios.get(this.url + '/user/level/' + this.PR)
        .then(this.getPRListSucc)
    },
    getPRListSucc (res) {
      res = res.data
      if (res) {
        this.FullList = res
        this.list = this.list.concat(this.FullList)
        console.log(this.list)
      }
    },
    getStudentList () {
      axios.get(this.url + '/user/level/' + this.student)
        .then(this.getStudentListSucc)
    },
    getStudentListSucc (res) {
      res = res.data
      if (res) {
        this.StudentList = res
      }
    },
    submit () {
      if (this.item.managerID === -1) {
        this.$notify.warning({
          title: '请选择项目负责人！'
        })
        return
      }
      if (this.item.name === '') {
        this.$notify.warning({
          title: '请输入项目名称！'
        })
        return
      }
      this.$axios({
        method: 'post',
        url: this.url + '/project/',
        data: JSON.stringify(this.item)
      }).then((res) => {
        if (res.status === 200) {
          const data = res.data
          this.taskAll.forEach(function (item) {
            if (item.name !== '') {
              axios.post('http://bci.renjiwulian.com/module/', {
                name: item.name,
                startTime: item.startTime,
                endTime: item.endTime,
                leaderID: item.leaderID,
                content: item.content,
                target: item.target,
                projectID: data.id
              }).then((res) => {
                if (res.status !== 200) alert(res.data)
              }).catch((err) => {
                alert(err)
              })
            }
          })
          alert('成功创建项目！')
          this.$router.push('/project')
        } else alert(res)
      }).catch((err) => {
        alert(err)
      })
    }
  },
  mounted () {
    this.item.managerID = -1
    this.task.leaderID = -1
    this.getPIList()
    this.getPRList()
    this.getStudentList()
  }
}
</script>

<style lang="stylus" scoped>
  .margin
    margin-top 15px
  .selectStyle
    height: 50px
    line-height: 50px
    width: 100%
    margin-left: -0.04
  .leaderChoose
    margin-top -0.08rem
  .text
    font-size: 14px
  .item
    margin-bottom: 18px
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
  }
</style>
